<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>

    /*border*/
    #app{
        /*width height为0 再加上边框会变成四个三角形*/
        width: 0;
        height: 0;
        /*边框整这么大 挤成了三角形*/
        /*梯形: 100px solid;*/
        /*梯形-color: red yellow blue black;*/
        border-left: 69px solid transparent;
        border-right: 69px solid transparent;
        border-bottom: 120px solid skyblue;
        margin-bottom: 10px;
    }
    /*画横*/
    .a {
        width: 100px;
        border: 2px solid red;
    }
    /*b和c分别画连接横线的两条变边*/
    .b {
        width: 100px;
        border: 2px solid red;
        transform-origin: 0 0;
        transform: rotate(60deg);
    }

    .c {
        width: 100px;
        border: 2px solid red;
        transform-origin: 100px 0;
        transform: rotate(-60deg);
    }
    /*clip-path*/
    .path{
        margin: 100px;
        width: 160px;
        height: 200px;
        background-color: skyblue;
        /*clip-path 就是使用它来绘制多边形（或圆形、椭圆形等）并将其定位在元素内。
        实际上，浏览器不会绘制 clip-path 之外的任何区域，因此我们看到的是 clip-path 的边界。

        下面来绘制一个指向右侧的三角形：clip-path: polygon(0 0, 0% 100%, 100% 50%);
        这个值是怎么来的呢？使用 clip-path 可以为沿路径放置的每个点定义坐标。
        在这种情况下，就定义了三个点：top-left左上角 (0 0)、bottom-left左下角 (0% 100%)、right-center右中间 (100% 50%)*/
        clip-path: polygon(0 0, 0% 100%, 100% 50%);
    }
</style>
<!--等边三角形
方式一：使用旋转去写。首先给写三个div然后给它设置边框，高默认为0，使用transform属性，然后旋转60度就可以以形成一个等边三角形。
方式二：使用边框去写，比如现在要写一个上面的三角形，就可以让左右边框的颜色为透明，上/下边的边框有颜色就行，宽高设置为0即可.
给定一个宽度和高度都为 0 的元素，其 梯形 的任何值都会直接相交，我们可以利用这个交点来创建三角形。也就是说，border属性是三角形组成的，下面给每一边都提供不同的边框颜色：
方式三：clip-path
-->
<body>
<div id="app">

</div>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="path"></div>
<!--<script>-->
<!--    document.querySelector("#app").style.borderBottomWidth = 100 * Math.tan(Math.PI / 3) + "px";-->
<!--</script>-->
</body>
</html>
